<template>
	<view class="page-container">
		<view class="form-container">
			<text class="form-title">入党申请书表单</text>
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="姓名" name="name">
					<uni-easyinput v-model="formData.name" :value="user.name" disabled />
				</uni-forms-item>
				<uni-forms-item label="性别" name="gender">
					<uni-data-checkbox v-model="formData.gender" :value="user.gender" :localdata="sexs"
						disabled></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="电话" name="phoneNum">
					<uni-easyinput v-model="formData.phoneNum" type="number" :value="user.phone" disabled />
				</uni-forms-item>
				<uni-forms-item label="出生日期" name="age" required>
					<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.birthdate" />
				</uni-forms-item>
				<uni-forms-item label="民族" name="ethnicity" required>
					<uni-data-select v-model="formData.ethnicity" :localdata="ethnicityEnum"
						@change=""></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="学历" name="eduLevel" required>
					<uni-data-select v-model="formData.eduLevel" :localdata="eduRange" @change=""></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="所属学院" name="department" required>
					<uni-easyinput type="text" placeholder="请输入您所在的学院" v-model="formData.department"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="自我介绍" name="selfIntro" required>
					<uni-easyinput type="textarea" placeholder="一个简短的自我介绍,介绍个人爱好特长等等(100字以内)"
						v-model="formData.selfIntro" maxlength="100"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="纸质申请书" required>
					<uni-file-picker limit="1" :file-mediatype="['pdf', 'doc', 'docx']" file-extname="pdf,doc,docx"
						@select="fileSelected" title="请上传PDF或Word格式的申请书" mode="list" :auto-upload="false"
						@delete="fileDeleted">
						选择文件
					</uni-file-picker>
				</uni-forms-item>
				<button @click="sumbit" class="submit-btn">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
import {
	ref
} from 'vue';
import {
	sexs,
	ethnicityEnum,
	makeUser,
	eduRange
} from '@/common/js/common';
import {
	onShow,
	onLoad,
	onReady
} from '@dcloudio/uni-app';
import {
	uploadFile,
	userInfo,
	uploadBatch,
	submitApplication
} from '@/common/js/api';

const rules = ref({
	ethnicity: {
		rules: [{
			required: true,
			errorMessage: '民族不能为空'
		}]
	},
	eduLevel: {
		rules: [{
			required: true,
			errorMessage: '教育背景不能为空'
		}]
	},
	selfIntro: {
		rules: [{
			required: true,
			errorMessage: '自我介绍不能为空'
		}]
	}
});

const formData = ref({
	name: '',
	gender: '',
	birthdate: '',
	phoneNum: '',
	ethnicity: '',
	eduLevel: '',
	department: '',
	applyDate: '',
	selfIntro: '',
	handwrittenDoc: null,
});
const form = ref(null);
const user = ref(makeUser());
const userId = ref();

onLoad(() => {
	userId.value = uni.getStorageSync('userId');
	userInfo(userId.value).then(result => {
		user.value = result;
	});
});

const imageStyles = ref({
	width: 120,
	height: 40,
	border: {
		radius: '4px'
	}
});

let fileSelectedPaths = [];

function sumbit() {
	form.value.validate().then(res => {
		// 先等待文件上传完成
		let uploadedPaths = '';
		if (fileSelectedPaths.length === 0) {
			uni.showToast({
				title: '请上传申请书文件',
				icon: 'none'
			});
			return;
		}
		uploadBatch(fileSelectedPaths).then((res) => {
			res.forEach((item) => {
				uploadedPaths = uploadedPaths + item + ','
			});
			formData.value.handwrittenDoc = uploadedPaths;
			formData.value.name = user.value.name;
			formData.value.phoneNum = user.value.phone;
			formData.value.gender = user.value.gender;
			formData.value.userId = userId.value;
			formData.value.status = 0;
			submitApplication(formData.value);
		});
	}).catch(err => {
		console.log('err', err);
	});
}

function fileSelected(e) {
	// 清空之前的文件
	fileSelectedPaths = [];
	// 添加新选择的文件
	e.tempFilePaths.forEach((filePath) => {
		fileSelectedPaths.push(filePath);
	});
}

function fileDeleted(e) {
	fileSelectedPaths = [];
}
</script>

<style scoped>
.page-container {
	background: linear-gradient(to bottom, #e0f7fa, #b2ebf2);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.form-container {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	width: 90%;
	text-align: center;
	max-width: 600px;
	margin-top: 10px;
}

.form-title {
	display: inline-block;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
	color: red;
}

.submit-btn {
	background-color: #1890ff;
	color: #fff;
	padding: 0px 20px;
	border-radius: 4px;
	text-align: center;
	width: 90%;
	height: 50px;
	margin: 10px 20px;
}

.submit-btn:hover {
	background-color: #40a9ff;
}
</style>